<template>
<div>
    <!-- 查询表单  姓名  手机号 -->
    <el-form
    ref="queryForm"
    :model="queryForm"
    :rules="queryFormRules"
    inline
    size="mini"
    label-width="80px">
    <!-- 姓名 -->
    <el-form-item label="姓名" prop="name">
        <el-input
            v-model="queryForm.name"
            placeholder="请输入姓名模糊查询"
            @keyup.enter.native="search">
        </el-input>
    </el-form-item>
    <!-- 手机号 -->
    <el-form-item label="手机号" prop="phone">
        <el-input
            v-model="queryForm.phone"
            placeholder="请输入手机号"
            @keyup.enter.native="search">
        </el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="idCard">
        <el-input
            v-model="queryForm.idCard"
            placeholder="请输入身份证号"
            @keyup.enter.native="search">
        </el-input>
    </el-form-item>
    <el-form-item>
        <el-button
            type="primary"
            plain
            icon="el-icon-search"
            @click="search"
        >查询</el-button>
        <el-button
            type="success"
            plain
            icon="el-icon-refresh"
            @click="resetQueryForm"
        >重置</el-button>
    </el-form-item>
    </el-form>

    <!-- 添加 修改 删除 按钮-->
    <el-row :gutter="1">
        <el-col :span="2">
            <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-plus"
            @click="handleAdd"
            >添加</el-button>
        </el-col>
        <el-col :span="2">
            <el-button
            type="success"
            plain
            size="mini"
            icon="el-icon-edit"
            :disabled="disableEdit"
            @click="handleEdit"
            >修改</el-button>
        </el-col>
        <el-col :span="2">
            <el-button
            type="danger"
            plain
            size="mini"
            icon="el-icon-delete"
            :disabled="disableDelete"
            @click="deleteUser1"
            >删除</el-button>
        </el-col>
    </el-row>

    <!-- 添加和修改的对话框 -->
    <el-dialog
    :title="title"
    :visible.sync="userFormDialogVisible"
    :close-on-click-modal="false">
        <el-form ref="userForm" :model="userForm" :rules="userFormRules"
            label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="userForm.name" placeholder="请输入真实姓名"/>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="userForm.gender">
                    <el-radio :label="0">女</el-radio>
                    <el-radio :label="1">男</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="userForm.idCard" placeholder="请输入身份证号" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="userForm.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item v-if="disableEdit" label="密码" prop="password">
                <el-input type="password" v-model="userForm.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="userForm.address" placeholder="请输入地址"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email" placeholder="请输入邮箱" />
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="userFormDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>

    
    <el-table
    :data="staffList"
    border
    stripe
    style="width: 100%; margin: 10px 0px"
    @selection-change="selectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别">
            <template slot-scope="{ row }">
                {{ row.gender==0?'女':'男' }}
            </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="身份证号" prop="idCard"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
    background
    layout="total, prev, pager, next, sizes, jumper"
    :current-page="pageNumber"
    :page-size="pageSize"
    :page-sizes="[5, 10, 15, 30]"
    @current-change="pageNumberChange"
    @size-change="pageSizeChange"
    :total="total">
    </el-pagination>
</div>
</template>

<script>

import { getAllStaff, addUser, updateUser, deleteUser } from '@/api/user'

export default {

    data() {
        return {
            pageNumber: 1,  // 页码
            pageSize: 5,    // 每页显示记录数
            total: 0,       // 总记录数
            staffList: [],  // 表格数据
            queryForm: {    // 查询表单参数
                name: '',
                phone: '',
                idCard:''
            },
            title: '添加',
            userFormDialogVisible: false, // 控制添加或修改表单的展示
            userForm: { // 添加或修改表单
                name:'',
                gender:'',
                idCard:'',
                phone:'',
                password:'',
                address:'',
                email:'',
                smsCode:'',
            },
            userFormRules: { /* 校验规则 */
                name:[{required:true,message:'请输入姓名'},
                    {min:2,max:5,message:'姓名最少2位最多5位'}],
                gender:[{required:true,message:'请选择性别'}],
                password:[{required:true,message:'请输入密码'},
                    {min:8,max:15,message:'密码最少8位最多15位'}],
                phone:[{required:true,message:'请输入手机号'},
                    { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号' }],
                idCard:[{required:true,message:'请输入身份证号'},
                    { pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/, message: '请输入正确的身份证号' }],
                address:[{required:true,message:'请输入地址'}],
                email:[{required:false,pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱' },],
            },
            queryFormRules:{
                name:[{required:false,max:5,message:'姓名最少2位最多5位'}],
                phone:[{required:false,pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号' }],
                idCard:[{required:false,pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/, message: '请输入正确的身份证号' }],
            },

            disableEdit: true, // 控制修改按钮是否可用
            disableDelete: true, // 控制删除按钮是否可用
            idList: [], // 要删除的id列表
            selectedUserList: []
        }
    },

    methods: {
        /* 点击添加时触发 */
    handleAdd() {
        this.title = '添加'
        this.userFormDialogVisible = true
        this.$nextTick(() => {
            this.userForm = {
            }
            this.$refs.userForm.resetFields()
        })
    },

        // 提交表单
    submit() {
        this.$refs.userForm.validate(async v => {
            if (v) { // 校验通过
                if (!this.userForm.id) { // 没有id就表示添加
                    const { code, message } = await addUser(this.userForm,2)
                    if (code === 200) {
                        this.$message.success('添加成功')
                        this.userFormDialogVisible = false
                        this.getAllStaff()
                    } else {
                        this.$message.error(message)
                    }
                } else { // 更新
                    const {code, message} = await updateUser(this.userForm)
                    if (code === 200) {
                        this.$message.success('更新成功')
                        this.userFormDialogVisible = false
                        this.getAllStaff()
                    } else {
                        this.$message.error(message)
                    }
                }
            } else {
                return false
            }
        })
    },

    /* 查询医务人员列表 */
    async getAllStaff() {
        const {code,message, data } = await getAllStaff(this.pageNumber, this.pageSize, this.queryForm)
        if(code == 200){
            this.staffList = data.rows
            this.pageNumber = data.pageNumber
            this.pageSize = data.pageSize
            this.total = data.total
            this.$message.success("查询成功")
        }else{
            this.$message.error(message)
        }
        
    },

    /* 切换页码时执行 */
    pageNumberChange(pageNumber) {
        this.pageNumber = pageNumber
        this.getAllStaff()
    },
    /* 切换每页显示记录数时执行 */
    pageSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getAllStaff()
    },
    /* 查询条件改变时从第一页开始查询 */
    search() {
        this.pageNumber = 1
        this.getAllStaff()
    },
    /* 重置查询表单 */
    resetQueryForm() {
        this.$refs.queryForm.resetFields()
        this.search()
    },

    /* 选择表格数据时执行 */
    selectionChange(selection) {
        // 值为false时能点击
        this.disableEdit = selection.length != 1
        this.disableDelete = !selection.length

        // 准备删除的id列表
        this.idList = selection.map(car => car.id)
        this.selectedUserList = selection
    },

    deleteUser1() {
        this.$confirm('是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            deleteUser(this.idList).then(resp => {
                console.log(resp)
                const {code, message } = resp
                if (code === 200) {
                    this.$message.success('删除成功')
                    this.getAllStaff()
                } else {
                    this.$message.error(message)
                }
            }).catch(e => {
                console.log(e)
            })
        }).catch(() => {
            this.$message.info('已取消删除')
        });
    },

    handleEdit() {
        this.title = '修改'
        // 为表单赋值
        this.userForm = { ... this.selectedUserList[0] }
        this.$nextTick(() => {
            // 在校验处加上了trigger之后  解决点击修改显示校验错误的问题
            this.$refs.userForm.validate()
        })
        this.userFormDialogVisible = true
    },
    },

    mounted() {
        this.getAllStaff()
    }
}
</script>
<style scoped>

</style>